<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">维护表单</span>
      </div>
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px" size="small">
          <el-card>
            <el-row :gutter="10">
              <div style="font-weight: 500;font-size: 14px;margin-bottom: 10px">基础信息</div>
              <el-col :span="8">
                <el-form-item label="业务类型" prop="bizType">
                  <dict-tag :options="dict.type.bus_flow_type" :value="form.bizType" />
                  <!--                <el-select style="width: 260px" v-model="form.bizType" placeholder="请选择业务类型" clearable>-->
                  <!--                  <el-option v-for="dict in dict.type.bus_flow_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>-->
                  <!--                </el-select>-->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="表单名称" prop="busFormName">
                  <el-input style="width: 260px" v-model="form.busFormName" placeholder="请输入表单名称" clearable />
                </el-form-item>
              </el-col>

              <!-- <el-col :span="8">
              <el-form-item label="引入页面" prop="pageAddress">
                <el-input style="width: 260px" v-model="form.pageAddress" placeholder="请输入引入页面" clearable/>
              </el-form-item>
            </el-col> -->
              <el-col :span="8">
                <el-form-item label="顺序" prop="sort">
                  <el-input style="width: 260px" v-model.number="form.sort" placeholder="请输入顺序" oninput="value=value.replace(/[^0-9]/g,'')" clearable />
                </el-form-item>
              </el-col>
              <!--            <el-col :span="8">-->
              <!--              <el-form-item label="调用方法" prop="callingMethod">-->
              <!--                <el-input style="width: 260px" v-model="form.callingMethod" placeholder="请输入调用方法" clearable/>-->
              <!--              </el-form-item>-->
              <!--            </el-col>-->
            </el-row>
          </el-card>
          <el-card>
            <el-row :gutter="10">
              <div style="font-weight: 500;font-size: 14px;margin-bottom: 10px">页面信息</div>
              <el-table :data="form.busPageList"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000', textAlign: 'center' }" border>
                <el-table-column prop="name" label="模块名称" min-width="180">
                  <template slot-scope="scope">
                    <el-form-item :prop="'busPageList.' + scope.$index + '.name'"
                      :rules="{ required: true, message: '模块名称不能为空', trigger: 'change', }">
                      <el-input style="width: 260px" v-model="scope.row.name" placeholder="请输入页面名称" clearable />
                    </el-form-item>

                  </template>
                </el-table-column>
                <el-table-column prop="pageUrl" label="引入页面" min-width="180">
                  <template slot-scope="scope">
                    <el-form-item :prop="'busPageList.' + scope.$index + '.pageUrl'"
                      :rules="{ required: true, message: '模块名称不能为空', trigger: 'change', }">
                      <el-input style="width: 260px" v-model="scope.row.pageUrl" placeholder="请输入引入页面" clearable />
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="fieldDict" label="操作" min-width="180">
                  <template v-slot="{ $index }">
                    <el-button type="danger" icon="el-icon-delete" circle @click="deletePage($index)"></el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="flex-xy-center" style="margin-top: 10px">
                <el-button type="primary" plain icon="el-icon-plus" @click="addPage">添加页面模块</el-button>
              </div>

            </el-row>
          </el-card>
          <el-card>
            <el-row :gutter="10">
              <div style="font-weight: 500;font-size: 14px;margin-bottom: 10px">判断字段</div>
              <el-table :data="form.busFieldList" :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                <template slot="empty">
                  <el-empty :image-size="50" description="暂无判断字段信息"></el-empty>
                </template>
                <el-table-column align="center" prop="fieldType" label="字段类型" min-width="180">
                  <template v-slot="{ row }">
                    <el-select v-model="row.fieldType" placeholder="请选择字段类型">
                      <el-option v-for="         dict          in          dict.type.field_type         "
                        :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="fieldName" label="字段名称" min-width="180">
                  <template v-slot="{ row }">
                    <el-input style="width: 260px" v-model="row.fieldName" placeholder="请输入字段名称" clearable />
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="fieldKey" label="key" min-width="180">
                  <template v-slot="{ row }">
                    <el-input style="width: 260px" v-model="row.fieldKey" placeholder="请输入key" clearable />
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="fieldDict" label="字典值" min-width="180">
                  <template v-slot="{ row }">
                    <el-input style="width: 260px" v-model="row.fieldDict" placeholder="请输入字段值" clearable />
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="fieldDict" label="操作" min-width="180">
                  <template v-slot="{ $index }">
                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteField($index)"></el-button>
                  </template>
                </el-table-column>
              </el-table>

              <div class="flex-xy-center" style="margin-top: 10px">
                <el-button type="primary" plain icon="el-icon-plus" @click="addField">添加判断字段</el-button>
              </div>

            </el-row>
          </el-card>


          <el-card>
            <el-row :gutter="10">
              <div style="font-weight: 500;font-size: 14px;margin-bottom: 10px">其他</div>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input style="width: 260px" type="textarea" v-model="form.remark" placeholder="请输入备注" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

        </el-form>

      </div>
    </el-card>

    <el-card class="box-card" shadow="never">
      <el-row :gutter="10" type="flex" justify="center">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-row>
    </el-card>


  </div>
</template>

<script>
import * as formSettingApi from "@/api/formConfig/formSetting";

export default {
  name: 'settingAdd',
  dicts: ['bus_flow_type', 'field_type'],
  props: {},
  data() {
    // 这里存放数据
    return {
      form: {
        id: null,
        bizType: null,
        callingMethod: null,
        flowBusId: null,
        pageAddress: null,
        sort: null,
        busFormName: null,
        remark: null,
        applySett: null,
        busFieldList: [
          {
            fieldType: null,
            fieldName: null,
            fieldKey: null,
            fieldDict: null
          }
        ],
        busPageList: [
          {
            name: '',
            pageUrl: '',
          }
        ]
      },

      rules: {
        busFormName: [
          { required: true, message: '请输入表单名称', trigger: 'change' },
        ],
        bizType: [
          { required: true, message: '请选择业务类型', trigger: 'change' },
        ],

        sort: [
          { required: true, message: '请输入顺序', trigger: 'change' },
        ],
        callingMethod: [
          { required: true, message: '请输入调用方法', trigger: 'change' },
        ]
      },
    }
  },
  watch: {
    form: {
      handler(newVal) {
        this.form = newVal
      },
      deep: true
    }
  },
  // 方法集合
  methods: {
    //获取详情
    getDetail() {
      formSettingApi.detail(this.form.id).then(res => {
        this.form = res.data;
      })
    },
    // 字段新增
    addField() {
      const obj = {
        fieldType: null,
        fieldName: null,
        fieldKey: null,
        fieldDict: null
      }
      if (this.form.busFieldList == null) {
        this.form.busFieldList = []
      }
      this.form.busFieldList.push(obj)
    },
    deleteField(index) {
      this.form.busFieldList.splice(index, 1)
    },
    // 页面模块新增
    addPage() {
      console.log('jinlail')
      const obj = {
        name: '',
        pageUrl: '',
      }
      if (this.form.busPageList == null) {
        this.form.busPageList = []
      }
      this.form.busPageList.push(obj)
      console.log(this.form.busPageList)
    },
    deletePage(index) {
      this.form.busPageList.splice(index, 1)
    },
    submitForm() {
      if (this.form.busFieldList?.length == 0) {
        this.$message.error('判断字段不能为空')
        return
      }
      if (this.form.busPageList?.length == 0) {
        this.$message.error('页面信息不能为空')
        return
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.form.busPageList.length>0){
            this.form.busPageList.map((res)=>{
                res.pageUrl = res.pageUrl.trim();
            })
          }
          if (this.form.id) {
            formSettingApi.update(this.form).then(res => {
              this.$message.success('修改成功')
              this.$router.back()
            })
          } else {
            formSettingApi.add(this.form).then(res => {
              this.$message.success('保存成功')
              this.$router.back()
            })
          }


        }
      })
    },
    cancle() {
      this.$router.back()
    }
  },
  created() {
    this.form.flowBusId = this.$route.query.flowBusId
    this.form.bizType = this.$route.query.bizType
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getDetail()
    }
  },

}
</script>

<style lang="scss" scoped></style>
